<template>
  <el-dialog
    title="订单详情"
    :visible.sync="showModel"
    width="1000px"
    :close-on-click-modal="false"
  >
    <div class="main">
      <h3>携程返回的订单详情信息</h3>
      <div class="xc-box">
        <div>
          新版订单状态：
          <span type="success" v-if="data.system_order_status === 1">预订成功</span>
          <span type="info" v-if="data.system_order_status === 2">已取消</span>
          <span v-if="data.system_order_status === 3">预订未到</span>
          <span type="success" v-if="data.system_order_status === 4">已入住</span>
          <span type="success" v-if="data.system_order_status === 5">已完成</span>
          <span type="info" v-else>暂无</span>
        </div>
        <el-popover placement="right" width="400" trigger="click">
          <el-table :data="data.dlt_order_info.cancelRules">
            <el-table-column property="deductType" label="扣除类型">
              <template slot-scope="scope">
                <span v-if="scope.row.deductType == 0">不扣除房费</span>
                <span v-else-if="scope.row.deductType == 1">扣除百分比</span>
                <span v-else-if="scope.row.deductType == 2">扣首晚</span>
                <span v-else>暂无</span>
              </template>
            </el-table-column>
            <el-table-column width="200" property="lastCancelTime" label="最晚取消时间">
              <template slot-scope="scope">
                {{ convertDate(scope.row.lastCancelTime) }}
              </template>
            </el-table-column>
            <el-table-column property="value" label="扣除房费的百分比">
              <template slot-scope="scope">
                {{ scope.row.value ? scope.row.value : "无" }}
              </template>
            </el-table-column>
          </el-table>
          <el-link target="_blank" :underline="false" slot="reference"
            >订单取消规则 <i class="el-icon-warning"></i
          ></el-link>
        </el-popover>
        <div>
          付款方式：<span>{{ data.dlt_order_info.paymentType }}</span>
        </div>
        <div>
          确认号：<span>{{
            data.dlt_order_info.confirmno ? data.dlt_order_info.confirmno : "暂无"
          }}</span>
        </div>
        <div>
          入住时间：<span>{{
            data.dlt_order_info.checkinDate
              ? convertDate(data.dlt_order_info.checkinDate)
              : "暂无"
          }}</span>
        </div>
        <div>
          离店时间：<span>{{
            data.dlt_order_info.checkoutDate
              ? convertDate(data.dlt_order_info.checkoutDate)
              : "暂无"
          }}</span>
        </div>
      </div>
      <h3>锦江返回的订单详情信息</h3>
      <div class="xc-box" v-if="data.query_order">
        <div>
          锦江支付状态: <span>{{ getPayState(data.pay_state) }}</span>
        </div>
        <div>
          实际入住时间：<span>{{ data.checkin_date }}</span>
        </div>
        <div>
          担保方式：<span v-if="data.query_order.assureType == 0">无担保</span
          ><span v-if="data.query_order.assureType == 2">全程担保</span>
        </div>
        <div v-if="data.query_order.contactEmail">
          联系人邮箱：<span>{{ data.query_order.contactEmail }}</span>
        </div>
        <div v-if="data.query_order.contactName">
          联系人姓名：<span>{{ data.query_order.contactName }}</span>
        </div>
        <div v-if="data.query_order.contactPhone">
          联系人电话：<span>{{ data.query_order.contactPhone }}</span>
        </div>
        <div v-if="data.query_order.createTime">
          创建时间：<span>{{ data.query_order.createTime }}</span>
        </div>
        <div v-if="data.query_order.depDate">
          实际离店时间：<span>{{ data.query_order.depDate }}</span>
        </div>
        <div v-if="data.query_order.externalId">
          第三方渠道的订单号：<span>{{ data.query_order.externalId }}</span>
        </div>
        <div v-if="data.query_order.feeRate">
          费用金额：<span>{{ data.query_order.feeRate }}</span>
        </div>
        <div v-if="data.query_order.guestsName">
          入住人姓名：<span>{{ data.query_order.guestsName }}</span>
        </div>

        <div>
          酒店id：<span>{{ data.dlt_order_info.hotelId }}</span>
        </div>
        <div>
          酒店名称：<span>{{ data.dlt_order_info.hotelName }}</span>
        </div>
        <!-- <div>发票类型：<span v-for="(item, index) in data.query_order.invoiceType">{{ getInvoiceType(item) }}</span></div> -->
        <div>
          订单保留时间：<span>{{ data.query_order.keepDate }}</span>
        </div>
        <div>
          订单编号：<span>{{ data.query_order.orderCode }}</span>
        </div>
        <div>
          订单状态：<span>{{ getOrderState(data.query_order.orderState) }}</span>
        </div>
      </div>
      <div class="xc-box" v-else>暂无数据</div>
    </div>
    <div class="footer-button">
      <el-button @click="cancelHandler">返回</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dataList: [],
    };
  },
  props: {
    show: {
      default: false,
      type: Boolean,
    },
    data: {
      default: {},
      type: Object,
    },
  },
  computed: {
    getPayState() {
      return (type) => {
        switch (type) {
          case 0:
            return "未付款";
          case 1:
            return "已付款";
          case 2:
            return "退款处理中";
          case 3:
            return "已退款";
          default:
            return "暂无";
        }
      };
    },
    getInvoiceType() {
      // 1 普通发票,0 无,2 增值税普通发票,3 增值税专用发票,4 电子增值税普通发票
      return (type) => {
        switch (type) {
          case 1:
            return "普通发票";
          case 0:
            return "无";
          case 2:
            return "增值税普通发票";
          case 3:
            return "增值税专用发票";
          case 4:
            return "电子增值税普通发票";
        }
      };
    },
    getOrderState() {
      return (type) => {
        switch (type) {
          case 1:
            return "预订成功";
          case 0:
            return "待确认";
          case 2:
            return "已取消";
          case 3:
            return "预订未到";
          case 4:
            return "已入住";
          case 5:
            return "已完成";
        }
      };
    },
    convertDate() {
      return (jsonDateString) => {
        const match = jsonDateString.match(/\/Date\((\d+)([+-]\d{4})?\)\//);
        if (!match) {
          return null; // 如果没有匹配到正确的格式，返回null
        }
        const milliseconds = parseInt(match[1], 10);
        const timezoneOffset = match[2] ? parseInt(match[2], 10) : 0; // 如果没有提供时区偏移，默认为0

        // 减去时区偏移（毫秒）
        const adjustedMilliseconds = milliseconds - timezoneOffset * 60 * 1000;

        // 创建Date对象
        const date = new Date(adjustedMilliseconds);

        // 格式化日期和时间（可选）
        const formattedDate = date.toLocaleString(); // 使用本地时间和日期格式
        return formattedDate;
      };
    },
    showModel: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
  created() {
    console.log(this.data);
  },
  methods: {
    cancelHandler() {
      this.turnOff();
    },
    turnOff() {
      this.showModel = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  margin-left: 20px;

  .xc-box {
    width: 800px;
    border: 1px solid #ccc;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;

    & > div {
      min-width: 50%;
      margin-bottom: 15px;
    }
  }
}

.footer-button {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
